<template>
	<view class="infoPage">
		<!-- 用户信息 -->
		<view class="info" v-for="(item,index) in infoList" :key="index" hover-start-time=15 hover-stay-time=200 hover-class="bgcolor"
		 @tap="modify(index)">
			<!-- 类型 -->
			<view>{{item.type}}</view>
			<view class="imageFont">
				<!-- 头像 -->
				<image v-if="index === 0" :src="item.content"></image>
				<!-- 昵称 -->
				<input v-else-if="index === 1" type="text" v-model="item.content" maxlength="18" />
				<!-- 生日 -->
				<picker v-else-if="index === 3" mode="date" :value="item.content" @change="bindDateChange">{{item.content}}</picker>
				<!-- 家乡 -->
				<picker v-else-if="index === 6" mode="region" @change="bindRegionChange">{{timetext[0]}} {{timetext[1]}}
					{{timetext[2]}}</picker>
				<!-- 其它没有特殊的都是text标签 -->
				<text v-else>{{item.content}}</text>
			</view>
			<!-- 小笔 -->
			<view class="iconfont icon-bi1"></view>
		</view>

		<!-- 按钮 -->
		<button class="complete" hover-start-time=15 hover-stay-time=200 hover-class="bgColoroutComplete" @tap="submit">完成</button>
	</view>
</template>

<script>
	import time from "@/common/time.js";
	export default {
		data() {
			return {
				timetext: ['浙江省', '杭州市', '滨江区'],
				infoList: [{
					type: "头像",
					content: "https://picsum.photos/100/100?random=2"
				}, {
					type: "昵称",
					content: "码码哈哈"
				}, {
					type: "性别",
					content: "不限"
				}, {
					type: "生日",
					content: "2020-08-26"
				}, {
					type: "情感",
					content: "已婚"
				}, {
					type: "职业",
					content: "IT"
				}, {
					type: "家乡",
					content: "广东广州"
				}],
			};
		},
		methods: {
			// 地区选择器
			bindRegionChange(e) {
				if (e) {
					this.timetext = e.detail.value;
				};
			},
			// 修改生日
			bindDateChange(e) {
				// 先判断e是否为一个对象，点击日历的确定按钮后e才为一个对象的。
				if (typeof(e) === "object") {
					let compareTimeResult = new time().compareTime(e.detail.value);
					// 若返回的内容是字符串，则表示时间格式是有错误,并且停止赋值
					if (typeof(compareTimeResult) === "string") {
						uni.showToast({
							title: compareTimeResult,
							icon: "none"
						});
						return;
					};
					this.infoList[3].content = e.detail.value;
				};
			},
			modify(index) {
				let itemList = [];
				switch (index) {
					case 0:
						// 选择头像功能
						uni.chooseImage({
							count: 1,
							sizeType: ["compressed"],
							sourceType: ["album", "camera"],
							success: res => {
								this.infoList[index].content = res.tempFilePaths[0];
							}
						});
						break;
					case 2:
						// 修改性别
						itemList = ['男', '女', '保密'];
						uni.showActionSheet({
							itemList,
							success: res => {
								this.infoList[index].content = itemList[res.tapIndex];
							}
						});
						break;
					case 3:
						// 修改生日
						this.bindDateChange();
						break;
					case 4:
						// 修改情感
						itemList = ['未婚', '已婚', '保密'];
						uni.showActionSheet({
							itemList,
							success: res => {
								this.infoList[index].content = itemList[res.tapIndex];
							}
						});
						break;
					case 5:
						// 修改职业
						itemList = ['IT', '教师', '农名', "学生"];
						uni.showActionSheet({
							itemList,
							success: res => {
								this.infoList[index].content = itemList[res.tapIndex];
							}
						});
						break;
					case 6:
						// 修改生日
						this.bindRegionChange();
						break;
					default:

						break;
				};
			},
			// 修改完成了
			submit() {
				console.log(this.infoList);
			},
		},
	}
</script>

<style lang="scss">
	// 用户信息的样式
	.info {
		padding: 20rpx;
		display: flex;
		align-items: center;

		picker {
			flex: 1;
			text-align: right;
		}

		input {
			font-size: 1.05rem;
			text-align: right;
		}

		>view {
			font-size: 1.05rem;

			&:first-of-type {
				color: #9C9C9C;
			}

			&:nth-of-type(2) {
				padding-right: 30rpx;
				flex: 1;
			}

			&:last-of-type {
				color: #ACACAC;
			}
		}
	}

	.imageFont {
		display: flex;
		justify-content: flex-end;

		>image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}

	// 完成按钮的样式
	.complete {
		letter-spacing: 10rpx;
		border-radius: 16rpx !important;
		margin: 150rpx 30rpx 0rpx;
		font-size: 1.1rem !important;
		background-color: #FADC2D;
		color: #6F530C;
		border: 2rpx solid #E0C527 !important;
	}

	.bgColoroutComplete {
		border: 2rpx solid #E0C527 !important;
		background-color: #F0CE05 !important;
	}
</style>
